<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="wrap">
        <h2>哈哈哈哈</h2>
        <ul class="list one" title="">
            <li id="first">01</li>
            <li class="second">02</li>
            <li>03</li>
            <li name="last">04</li>
        </ul>
        <ul class="list two" title="">
            <li id="first">01</li>
            <li class="second">02</li>
            <li>03</li>
            <li name="last">04</li>
        </ul>
    </div>
</body>
<script>
    // 节点
    // 文档节点 元素节点 属性节点 文本节点 注释节点

    // 父节点
    // 子节点
    // 同胞节点

    var one = document.querySelector(".one");
    console.log(one);

    // 父节点 父元素   => 父节点和父元素没区别
    
    // console.log(one.parentNode);//父节点
    // console.log(one.parentElement);//父元素

    // 子节点 子元素
    
    console.log(one.childNodes);//子节点
    console.log(one.children);//子元素

    // 第一个子节点 第一个子元素
    console.log(one.firstChild);//第一个子节点
    console.log(one.firstElementChild);//第一个子元素

    // 最后一个子节点 最后一个子元素
    console.log(one.lastChild);//最后一个子节点
    console.log(one.lastElementChild);//最后一个子元素

    // 同胞
    // 前一个 同胞节点  前一个 同级元素
    var second = document.querySelector(".second");
    console.log(second.previousSibling);//前一个节点
    console.log(second.previousElementSibling);//前一个元素

    // 后一个 同胞节点  后一个 同级元素
    var second = document.querySelector(".second");
    console.log(second.nextSibling);//后一个节点
    console.log(second.nextElementSibling);//后一个元素
</script>
</html>